<template>
  <div class="tea-tab">
    <ul>
        <li v-for="(item , index) in teaList" :key="index"
        @click="goDetail(item.id)">
            <img :src="item.imgUrl" alt="">
            <h3>{{item.name}}</h3>
        </li>
    </ul>
  </div>
</template>

<script>
export default {
    data() {
        return{
            teaList:[
                {
                    id:1,
                    imgUrl:'https://m.360buyimg.com/babel/jfs/t1/63886/17/13184/5996/5da86255E72833418/8746937ba0ad9fe4.jpg',
                    name:'乌龙茶'
                },
                {
                    id:2,
                    imgUrl:'https://m.360buyimg.com/babel/jfs/t1/75060/27/13073/6958/5da861d4E69f1d88b/4436b446f667d965.jpg',
                    name:'绿茶'
                },
                {
                    id:3,
                    imgUrl:'https://m.360buyimg.com/babel/jfs/t1/201848/23/19413/3375/6386fd6fE6463b3fa/d08ed7442c163a36.jpg',
                    name:'铁观音'
                },
                {
                    id:4,
                    imgUrl:'https://m.360buyimg.com/babel/jfs/t1/191065/23/35045/9314/64649e01Fce8fa860/65903757698fa393.jpg',
                    name:'普洱'
                },
                {
                    id:5,
                    imgUrl:'https://m.360buyimg.com/babel/jfs/t1/71217/27/13170/7168/5da86215E33ba8cf1/51bb0056ee4693db.jpg',
                    name:'红茶'
                },
                {  
                    id:6,
                    imgUrl:'https://m.360buyimg.com/babel/jfs/t1/104920/19/34756/11139/6386fd6eE6c765530/e51ea0e4b421fbd2.png',
                    name:'黑茶'
                },
                {
                    id:7,
                    imgUrl:'https://m.360buyimg.com/babel/jfs/t1/146399/39/33870/6886/6386f7f1E676ca2e0/3cd5ab6de88815fd.png',
                    name:'白茶'
                },
                {
                    id:8,
                    imgUrl:'https://m.360buyimg.com/babel/jfs/t1/116688/16/31686/9517/6386fd6eE7f72e63f/e1edc48cdd71a087.png',
                    name:'菊花茶'
                },
                {
                    id:9,
                    imgUrl:'https://m.360buyimg.com/babel/jfs/t1/41283/39/20531/11736/6386fd6fE4e86d4e6/9b1ee5ae5154b738.png',
                    name:'茉莉花茶'
                }
            ]
        }
    },
    methods: {
        goDetail(id) {
            this.$router.push({path: '/detail', query: {id: id}})
            window.scrollTo(0, 0);
        }
    }
}
</script>

<style scoped> 
.tea-tab {
    background-color: white;
}
.tea-tab img {
    width: 66px;
    height: 66px;
}
.tea-tab h3 {
    font-size: 16px;
}
.tea-tab ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0 10px;
    margin-top: 30px;
}
.tea-tab li {
    list-style: none;
    width: 30%;
    margin-bottom: 20px;
    text-align: center;
}

</style>